{layout name="layout/header" /}
<link href="root/css/plugins/footable/footable.core.css" rel="stylesheet">

<link href="root/css/plugins/switchery/switchery.css" rel="stylesheet">
<script src="root/js/plugins/switchery/switchery.js"></script>
<!--<link href="root/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">-->

<div class="wrapper wrapper-content animated fadeInRight">

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>订单列表</h5>

                </div>
                <div class="ibox-content">
                    <p>
                        <button type="button" class="btn btn-primary btn-outline refresh">刷新</button>
                    </p>
                    <form class="form-inline">
                        <div class="form-group">
                            <select class="form-control " id="status">
                                <option value="0">全部</option>
                                <option value="1">未付款</option>
                                <option value="2">已付款</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <input type="text" id="keyword" class="form-control" placeholder="关键词" value="{$keyword}">
                        </div>
                        <a class="btn btn-success search">查询</a>
                    </form>
                </div>
                <div class="ibox-content">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>订单编号</th>
                                <th>用户昵称</th>
                                <th>期刊名字</th>
                                <th>数量</th>
                                <th>总金额(元)</th>
                                <th>状态</th>
                                <th>付费路径</th>
                                <th>付款时间</th>
                                <th>创建时间</th>
                            </tr>
                        </thead>
                        <tbody>
                        {volist name="data.list" id="vo"}
                            <tr pid="{$vo.id}">
                                <td>{$vo.id}</td>
                                <td>{$vo.order_no}</td>
                                <td>{$vo.nickname}</td>
                                <td>{$vo.name}</td>
                                <td>{$vo.nums}</td>
                                <td>{$vo.amount/100}</td>
                                <td>{switch name="$vo.status"}
                                    {case value="1"}<span class="text-danger">未付款</span>{/case}
                                    {case value="2"}<span class="text-success">已付款</span>{/case}
                                    {/switch}
                                </td>
                                <td>
                                    {switch name="$vo.type"}
                                    {case value="1"}<span class="text-success">H5网页</span>{/case}
                                    {case value="2"}<span class="text-danger">小程序</span>{/case}
                                    {/switch}
                                </td>
                                <td>
                                    {if condition="$vo.pay_time"}
                                        {$vo.pay_time|date="Y-m-d H:i",###}
                                    {/if}
                                </td>
                                <td>{$vo.addtime|date="Y-m-d H:i",###}</td>
                            </tr>
                        {/volist}
                        </tbody>
                        <tfoot>
                        <tr>
                            <td colspan="5">
                                {$data.page}
                            </td>
                        </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>

<!--layer-->
<script src="root/js/plugins/layer/layer.min.js"></script>

<script>
    $(document).ready(function() {
        var elem = document.querySelectorAll('.js-switch');
        elem.forEach(function(i,index){
            var a= "a" +index;
            a = new Switchery(i, {
                color: '#1AB394'
            });
        });
        var status = "{$status}";
        if(status)
            $('#status').val(status);
        //搜索
        $('.search').click(function () {
            var status = $("#status").val();
            var keyword = $("#keyword").val().trim();

            var url = "{:url('index')}"+'/status/'+status+"/keyword/"+keyword;
            window.location.href = url;
        });

        //列表页修改
        $(".update_text").blur(function () {
            var field = $(this).attr('data-field');
            var id = $(this).parent().parent().attr('pid');
            var value = $(this).val().trim();
            update(id,field,value);
        });
        $(".update_checkbox").change(function () {
            var field = $(this).attr('data-field');
            var value = $(this).is(':checked')?1:0;
            var id = $(this).parent().parent().attr('pid');
            update(id,field,value);
        });
        function update(id,field,value) {
            $.ajax({
                url:"{:url('ajaxUpdate')}",
                type:'post',
                dataType:'json',
                data:{field:field,value:value,id:id},
                success:function (data) {
                    console.log(data.msg);
                    if(data.code != 1){
                        layer.msg(data.msg);
                    }
                }
            })
        }
    });

</script>
